<script setup lang='ts'>
  import { nextTick, reactive, ref } from 'vue';
  import { gamesApi } from '@/api/controller';
  import { ToastSuccess, ToastWarning, Toastloading, allNumber } from '@/utils/public';
  const formLabelWidth = '120px'
  const dataForm = ref()
  const $emit = defineEmits(['updateList'])
  const action = reactive({
    dialogFormVisible:false,
    disabled:false,
    title:'',
    rewardTypeArr:[] as Array<any>,
    receiveTypeArr:[] as Array<any>,
    dayTypeArr:[] as Array<any>,
  })
  interface formQuert {
    rank_id:number
    reward_id:number
    rank_num:number
    reward_need_min:number
    reward_type:number
    data_id:number | string
    data_num:number
    receive_type:number
    day_type:number
  }
  let form = reactive({} as formQuert)
  const formRules = {
    day_type: [{ required: true, message: "请选择榜单结算类型", trigger: "blur" }],
    rank_num: [{ required: true, message: "请输入榜单名次", trigger: "blur" }],
    reward_type: [{ required: true, message: "请选择奖励类型", trigger: "blur" }],
    data_id: [{ required: true, message: "请输入奖励ID", trigger: "blur" }],
    data_num: [{ required: true, message: "请输入奖励数量", trigger: "blur" }],
    receive_type: [{ required: true, message: "请选择奖励方式", trigger: "blur" }],
    reward_need_min: [{ required: true, message: "请输入奖励门槛", trigger: "blur" }],
  }
  const rewardTypeChange = (e:any = 0)=>{
    if([6,7].indexOf(e) > -1) form.data_id = ''
  }
  const handleSubmit = ()=>{
    dataForm.value.validate(async(valid:any)=>{
      if(!valid) return
      const loading = Toastloading()
      let submitSet = false
      const { reward_id } = form
      if(reward_id) {
        await gamesApi.customRankRewardEdit(form).then(()=>{
          ToastSuccess('编辑成功')
          submitSet = true
        }).catch(()=>{
          loading.close()
        })
      }
      else {
        await gamesApi.customRankRewardAdd(form).then(()=>{
          ToastSuccess('新增成功')
          submitSet = true
        }).catch(()=>{
          loading.close()
        })
      }
      if(submitSet) {
        loading.close()
        $emit('updateList')
        closeDialog()
      }
    })
  }
  const openDialog = (query:any={})=> {
    const {
      id:reward_id=0, rank_id='', rank_num='', reward_need_min='',day_type='',
      reward_type='', data_id='', data_num='', receive_type='',
      game_name='', rank_type_text='', data_name='',
      receiveTypeArr=[], rewardTypeArr=[], dayTypeArr=[]
    } = query
    if(!rank_id) return ToastWarning('缺少榜单ID')
    const obj = {
      rank_id, rank_num, reward_need_min, day_type,
      reward_type, data_id, data_num, receive_type,
    } as any
    if(reward_id) obj['reward_id'] = reward_id
    Object.assign(form,obj)
    action.receiveTypeArr = receiveTypeArr
    action.rewardTypeArr = rewardTypeArr
    action.dayTypeArr = dayTypeArr
    action.dialogFormVisible = true
    action.title = reward_id?`编辑榜单：${game_name}-${rank_type_text}-${data_name}奖励`:'创建榜单奖励'
  }
  const closeDialog = ()=>{
    form = reactive({} as formQuert)
    nextTick(() => {
      dataForm.value.clearValidate();
    });
    action.dialogFormVisible = false
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <div>
    <el-dialog
      top="10vh"
      class="xm-dialog input-width"
      v-model="action.dialogFormVisible"
      :close-on-click-modal="action.disabled"
      :show-close="action.disabled"
      :close-on-press-escape="action.disabled"
      width="55%"
      :title="action.title">
      <el-form ref="dataForm" :model="form" :rules="formRules">
        <el-form-item :label-width="formLabelWidth" label="榜单名次" prop="rank_num">
          <el-input v-model="form.rank_num" placeholder="请输入榜单名次" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="榜单结算类型" prop="day_type">
          <el-select v-model="form.day_type" placeholder="请选择榜单结算类型">
            <el-option v-for="item in action.dayTypeArr" :label="item.text" :value="item.type" />
          </el-select>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="奖励类型" prop="reward_type">
          <el-select v-model="form.reward_type" @change="rewardTypeChange" placeholder="请选择奖励类型">
            <el-option
              v-for="item in action.rewardTypeArr"
              :label="item.text"
              :value="item.type"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="[6,7].indexOf(form.reward_type) == -1" :label-width="formLabelWidth" label="奖励ID" prop="data_id">
          <el-input v-model="form.data_id" placeholder="请输入奖励ID" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="奖励数量" prop="data_num">
          <el-input v-model="form.data_num" placeholder="请输入奖励数量" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="奖励方式" prop="receive_type">
          <el-select v-model="form.receive_type" placeholder="请选择奖励方式">
            <el-option
              v-for="item in action.receiveTypeArr"
              :label="item.text"
              :value="item.type"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="奖励门槛" prop="reward_need_min">
          <el-input v-model="form.reward_need_min" placeholder="请输入奖励门槛" />
        </el-form-item>
      </el-form>
      <template v-if="!action.disabled" #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>